import {
  Button,
  Image,
  message,
  Modal,
  Space,
  TypographyText
} from 'ant-design-vue'
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'

import clPointApi from '@/apis/clPointApi'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { useDialog } from '@/hooks'
import { bus, optionsToMap } from '@/utils'

import UserLogList from './components/userLogList'

export default defineComponent({
  name: 'UserSearch',

  setup() {
    const curOptionItem = ref({} as any)
    const showLogDlg = ref(false)
    const { showConfirm } = useDialog()
    const userStatusOptions = [
      { label: '已激活', value: 1 },
      { label: '已禁用', value: 2 },
      { label: '未激活', value: 4 },
      { label: '退出企业', value: 5 }
    ]

    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        formConfig: {
          items: [
            {
              title: '成员姓名',
              field: 'userName',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  allowClear: true
                }
              }
            },
            {
              title: '状态',
              field: 'userStatus',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                props: {
                  placeholder: '全部',
                  allowClear: true
                },
                options: userStatusOptions
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columnConfig: {
          minWidth: 100,
          resizable: true
        },
        columns: [
          {
            title: '成员姓名',
            field: 'userName'
          },
          {
            title: '归属部门',
            field: 'deptName'
          },
          {
            title: '状态',
            field: 'userStatus',
            formatter: ({ cellValue }) => {
              return optionsToMap(userStatusOptions)[cellValue]
            }
          },
          {
            title: '所在群',
            field: 'groupName'
          },
          {
            title: '扫码状态',
            slots: {
              default: 'scanStatus'
            }
          },
          {
            title: '客户总数',
            slots: {
              default: 'total'
            }
          },

          {
            title: '成员userid',
            field: 'userId',
            minWidth: 200
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          seq: true,
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await clPointApi.getUserList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },

                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    const router = useRouter()

    //日志
    function showRecords(item) {
      curOptionItem.value = item
      showLogDlg.value = true
    }

    //查看客户
    function customerInfo(item) {
      router.push({
        name: 'CustomerInfo',
        query: {
          userId: item.userId,
          groupId: item.groupId
        }
      })
    }

    return {
      tableRef,
      tableConfig,
      curOptionItem,
      showLogDlg,
      showRecords,
      customerInfo
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            scanStatus: ({ row }) => {
              return (
                <Space>
                  {row.isOnline == 0 ? (
                    <TypographyText type="danger">下线</TypographyText>
                  ) : (
                    <TypographyText type="success">上线</TypographyText>
                  )}
                  <Button
                    type="link"
                    onClick={() => {
                      this.showRecords(row)
                    }}
                  >
                    日志
                  </Button>
                </Space>
              )
            },
            total: ({ row }) => {
              return (
                <Button
                  type="link"
                  onClick={() => {
                    this.customerInfo(row)
                  }}
                >
                  {row.memberCount}
                </Button>
              )
            }
          }}
          {...this.tableConfig}
        />

        <Modal
          v-model:visible={this.showLogDlg}
          title="操作日志"
          destroyOnClose
          width={600}
          footer={null}
        >
          <UserLogList robotId={this.curOptionItem.robotId} />
        </Modal>
      </div>
    )
  }
})
